<html>

<head>
    <link rel="stylesheet" href="style.css">
    <style></style>
    <script type="module" src="jumps.js"></script>
</head>

<body>
    <div class="back hide">
        <div class="circle">
            返回
        </div>
    </div>
    <div class="col">
        <h2>模糊效果</h2>
        <!---->
        <p>
            <pre>显示输入合成/图像的模糊版本。

通常情况下，<property query="showUnblurredContent">显示未模糊内容</property>被设置为在模糊内容之上叠加显示原始未模糊的输入内容。</pre>

        </p>
        <h4>属性</h4>
        <hr>
        <!---->
        <dl><dt>通用元素属性</dt>
            <dd>
                <p>参见<a href="local://customization_general">通用属性</a>。</p>
            </dd>
            
            <hr>
            
            <dt id="blendModeContent">内容混合模式</dt>
            <dd>
                <p>用于显示原始内容（模糊之前）的混合模式。在设置了<property query="showUnblurredContent">显示未模糊内容</property>或<property query="showUnblurredContentUnder">在下层显示未模糊内容</property>时使用。</p>
            </dd>
            <dt id="color">颜色</dt>
            <dd>
                <p>模糊的色调。</p>
            </dd>
            <dt id="sourceCompositionIndex">源合成索引</dt>
            <dd>
                <p>用作输入的构图索引。</p>
            </dd>
            <dt id="MaskImage">蒙版图像</dt>
            <dd>
                <p>用于遮罩区域的图像/合成。</p>
            </dd>
            <dt id="showUnblurredContent">显示未模糊内容</dt>
            <dd>
                <p>在模糊之上显示原始内容（模糊之前的）。</p>
            </dd>
            <dt id="showUnblurredContentUnder">在下层显示未模糊内容</dt>
            <dd>
                <p>在模糊之下显示原始内容（模糊之前的）。</p>
            </dd>

            <hr>
            
            <dt id="blurRadius">模糊半径</dt>
            <dd>
                <p>模糊程度。</p>
            </dd>
            <dt id="blurMultiplier">模糊倍数</dt>
            <dd>
                <p>增强<property query="blurRadius">模糊半径</property>属性。</p>
            </dd>
            <dt id="1layerScale">第1层缩放</dt>
            <dd>
                <p>调整模糊内容的缩放。</p>
            </dd>
            <dt id="2layerScale">第2层缩放</dt>
            <dd>
                <p>调整模糊内容的缩放。</p>
                如果设置大于<value>0</value>，将显示第二层模糊内容。
            </dd>
            <dt id="3layerScale">第3层缩放</dt>
            <dd>
                <p>调整模糊内容的缩放。</p>
                如果设置大于<value>0</value>，将显示第三层模糊内容。
            </dd>
        </dl>
        <!---->
    </div>

    <style media="screen" type="text/css">
        .container {
            width: 100%;
        }

        .container div {
            width: 100%;
        }

        .container .header {
            padding: 2px;
            cursor: pointer;
        }

        .container .content {
            display: none;
        }
    </style>


</body>
<script>
    // 获取当前页面的 URL
    const url = window.location.href;
    
    // 查找 URL 中的片段标识符
    const fragmentIndex = url.indexOf('#');
    
    if (fragmentIndex !== -1) {
        // 提取片段标识符后的内容
        const targets = decodeURI(url.substring(fragmentIndex + 1)).split(' ');
        for (const value of targets) {
            let target = document.getElementById(value)
            target.classList.remove('blink')
            target.classList.add('blink')
            setTimeout(() => target.classList.remove('blink'), 1400)
            target.innerText = window.location.href
            if (index == 0)
                target.scrollIntoView()
        }
    
    } else {
        console.log('No fragment in URL.');
    }
    function isElementInViewport(element) {
        const rect = element.getBoundingClientRect();
        return (
          rect.top >= 0 &&
          rect.left >= 0 &&
          rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
          rect.right <= (window.innerWidth || document.documentElement.clientWidth)
        );
      }
    
    var hide
    
    for (const value of document.querySelectorAll('property')) {
        value.addEventListener('click', (event) => {
            let top = document.body.scrollTop
            console.log(top)
            document.querySelector('.back').classList.remove('hide')
            clearTimeout(hide)
            hide = setTimeout(() => document.querySelector('.back').classList.add('hide'), 5000)
            document.querySelector('.back').addEventListener('click', () => {
                document.body.scrollTop = top
                document.querySelector('.back').classList.add('hide')
            })  
    
            let ids = event.target.getAttribute('query').split(' ')
            for (let index = 0; index < ids.length; index++) {
                const id = ids[index];
                let target = document.getElementById(id)
                target.classList.remove('blink')
                target.classList.add('blink')
                setTimeout(() => target.classList.remove('blink'), 1400)
                if (index == 0&&!isElementInViewport(target))
                    target.scrollIntoView()
            }
        })
    }</script>
</html>